<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页定位导航效果扩展案例</title>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            line-height: 1.7;
            background-color: #888;
        }

        li {
            list-style: none;
        }

        #content {
            width: 1000px;
            margin: 0 auto;
            padding-top: 100px;
            padding-bottom: 700px;
        }
        
        #content .item {
            position: relative;
            height: 540px;
        }
        #content .item img {
            position: absolute;
            top: 100px;
            left: 50%;
        }

        #content #item1 {
            background: url("http://img.mukewang.com/536c9ea800013ae610000540.jpg") no-repeat center top;
        }
        #content #item2 {
            background: url("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat center top;
        }

        #content #item3 {
            background: url("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;
        }

        #content #item4 {
            background: url("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat center top;
        }

        #content #item5 {
            background: url("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat center top;
        }
        
        #menu {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: -700px;
        }
        #menu h1 {
            width: 200px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            background: #ee1111;
            line-height: 30px;
        }
        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 12px;
            color: #ccc;
            width: 160px;
            padding: 10px 20px;
            text-decoration: none;
            text-align: left;
            border-bottom: 1px dashed #999;
        }

        #menu ul li a strong {
            color: #f1f1f1;
        }

        #menu ul li a:hover,
        #menu ul li a.current {
            color: #fff;
            background: #666;
        }

        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
        $(document).ready(function () {
            $(window).scroll(function () {
                var top = $(document).scrollTop();
                var menu = $("#menu");
                var items = $("#content").find(".item");
                var currentId = "";

                items.each(function(){
                    var m = $(this);
                    var iTop = m.offset().top;
                    if (top > iTop - 200) {
                        currentId = "#" + m.attr('id');
                    } else {
                        return false;
                    };
                });
                console.log(currentId);

                var currentA = menu.find('.current');
                if (currentId && currentA.attr('href') != currentId) {
                    currentA.removeClass('current');
                    menu.find('[href="' + currentId + '"]').addClass('current');
                };
            });

        });
</script>
</head>
<body>
    <div id="menu">
        <h1>正在首发</h1>
        <ul>
            <li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
            <li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
            <li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
            <li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
            <li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="item1" class="item">
            <img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
        </div>
        <div id="item2" class="item">
            <img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
        </div>
        <div id="item3" class="item">
            <img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
        </div>
        <div id="item4" class="item">
            <img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
        </div>
        <div id="item5" class="item">
            <img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
        </div>
    </div>
</body>
</html>